<template>
    <div>
        <el-container class="common-layout">
            <el-main>
                <div class="divs">
                    <span class="title">
                        <el-icon>
                            <House />
                        </el-icon>
                        财务管理/应收单/<span style="color: #0098FF;">应收单结算</span>
                    </span>
                </div>
                <p style="padding-right: 1080px;"><strong style="color: #006EFF;">|</strong>&nbsp;&nbsp;费用信息</p>
                <el-form :model="form" label-width="auto" :rules="rules" ref="refform">
                    <div
                        style="background-color: #F5F9FF;padding: 10px;text-align: center;border-radius: 10px;width: 1100px;margin-left: 35px;">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="应收单号:" prop="Receivable_number">
                                    <el-input v-model="form.Receivable_number" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="订单号:" prop="Ord_number">
                                    <el-input v-model="form.ord_number" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="保险费:" prop="Insurance">
                                    <el-input v-model="form.insurance" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="包装费:" prop="Packag_fee">
                                    <el-input v-model="form.packag_fee" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="装卸费:" prop="Handling_fee">
                                    <el-input v-model="form.handling_fee" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="中转费:" prop="Transit_fees">
                                    <el-input v-model="form.transit_fees" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="燃油费:" prop="Fuel_costs">
                                    <el-input v-model="form.fuel_costs" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="16">
                                <el-form-item label="服务费:" prop="Service_charge">
                                    <el-input v-model="form.service_charge" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="其他费用:" prop="Other_fee">
                                    <el-input v-model="form.other_fee" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <p style="padding-right: 1050px;"><strong style="color: #006EFF;">|</strong>&nbsp;&nbsp;应收</p>
                    <div
                        style="background-color: #F5F9FF;padding: 10px;text-align: center;border-radius: 10px;width: 1100px;margin-left: 35px;">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="现付:" prop="Pay_as_you_go">
                                    <el-input v-model="form.pay_as_you_go" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="预付:" prop="Prepayment">
                                    <el-input v-model="form.prepayment" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="到付:" prop="Collect">
                                    <el-input v-model="form.collect" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col> 
                            <el-col :span="8">
                                <el-form-item label="周期付:" prop="Periodical_payment">
                                    <el-input v-model="form.periodical_payment" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <p style="padding-right: 1060px;"><strong style="color: #006EFF;">|</strong>&nbsp;&nbsp;实收</p>
                    <div
                        style="background-color: #F5F9FF;padding: 10px;text-align: center;border-radius: 10px;width: 1100px;margin-left: 35px;">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="现付:" prop="paid_up_Pay">
                                    <el-input v-model="form.paid_up_Pay" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="预付:" prop="Paid_up_prepayment">
                                    <el-input v-model="form.paid_up_prepayment" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="到付:" prop="Paid_up_collect">
                                    <el-input v-model="form.paid_up_collect" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="周期付:" prop="Paid_up_periodical">
                                    <el-input v-model="form.paid_up_periodical" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <div style="height: 50px;"></div>
                    <div class="button">
                        <el-form-item>
                            <el-button>取消</el-button>
                            <el-button type="primary" @click="Update">保存</el-button>
                        </el-form-item>
                    </div>
                </el-form>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import { onMounted, ref, reactive } from 'vue'
//import axios from 'axios';
import $http from '@/axios/base.js';
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue';
import { Upload } from 'element-plus';
import { useRoute, useRouter } from "vue-router";
export default {
    setup() {
        let tableData = ref([]);
        let route = useRoute();
        let router = useRouter();
        let id = ref('');
        let refform = ref(null);

        let form = reactive({
            Receivable_number: '',  //应收单号
            ord_number: '',  //订单号
            insurance: '',  //保险费
            packag_fee: '',  //包装费
            handling_fee: '',  //装卸费
            transit_fees: '',  //中转费
            fuel_costs: '',  //燃油费
            service_charge: '',  //服务费
            other_fee: '',  //其他费用
            pay_as_you_go: '',  //现付
            prepayment: '',  //预付
            collect: '',  //到付
            periodical_payment: '',  //周期付
            paid_up_Pay: '',  //实收现付
            paid_up_prepayment: '',  //实收预付
            paid_up_collect: '',  //实收到付
            paid_up_periodical: '',  //实收周期付
        })


        onMounted(() => {
            id.value = route.query.id;
            show();
        })


        const GetSign_id = (id, index) => {
      $http.get(`http://localhost:5261/api/Receivable_meter/GetSign_id/${id}`)
        .then((res) => {
          Object.assign(tableData.value[index], res);
          console.log(tableData.value[index]);
        })
        .catch((err) => console.log(err))
    }

    const GetOrd_id = (id, index) => {
      $http.get(`http://localhost:5261/api/Receivable_meter/GetOrd_id/${id}`)
        .then((res) => {
          Object.assign(form, res);
          console.log(form);
        })
        .catch((err) => console.log(err))
    }

    const GetCustomer_id = (id, index) => {
      $http.get(`http://localhost:5261/api/Receivable_meter/GetCustomer_id/${id}`)
        .then((res) => {
          Object.assign(tableData.value[index], res);
          console.log(tableData.value[index]);
        })
        .catch((err) => console.log(err))
    }

        function show() {  //根据id查询要显示的值
            $http.get(`http://localhost:5261/api/Receivable_meter/GetReceivable_meter_Update/${id.value}`).then((res) => {
                tableData.value = res;
                res.forEach((item, index) => {
                GetSign_id(item.sign_id, index);
                GetOrd_id(item.ord_id, index);
                GetCustomer_id(item.ct_id,index);
                });
                console.log(res);
                form.Receivable_number = res[0].receivable_number;  //应收单号
                form.Ord_number = res[0].ord_number ;  //订单号
                form.Insurance = res[0].insurance;  //保险费
                form.Packag_fee = res[0].packag_fee;  //包装费
                form.Handling_fee = res[0].handling_fee;  //装卸费
                form.Transit_fees = res[0].transit_fees;  //中转费
                form.Fuel_costs = res[0].fuel_costs; //燃油费
                form.Service_charge = res[0].service_charge;  //服务费
                form.Other_fee = res[0].other_fee;  //其他费用
                form.Pay_as_you_go = res[0].pay_as_you_go;  //现付
                form.Prepayment = res[0].prepayment;  //预付
                form.Collect = res[0].collect;  //到付
                form.Periodical_payment = res[0].periodical_payment;  //周期付
                form.paid_up_Pay = res[0].paid_up_Pay;  //实收现付
                form.paid_up_prepayment = res[0].paid_up_prepayment;  //实收预付
                form.paid_up_collect = res[0].paid_up_collect;  //实收到付
                form.paid_up_periodical = res[0].paid_up_periodical;  //实收周期付
            }).catch((err) => {
                console.log("错误：" + err);
            })
        }
        const rules = reactive({
            paid_up_Pay: [
                { required: true, message: '实收现付不能为空', trigger: 'blur' }
            ],
            paid_up_prepayment: [
                { required: true, message: '实收预付不能为空', trigger: 'blur' }
            ],
            paid_up_collect: [
                { required: true, message: '实收到付不能为空', trigger: 'blur' }
            ],
            paid_up_periodical: [
                { required: true, message: '实收周期付不能为空', trigger: 'blur' }
            ],
        });
        function Update() {
            refform.value.validate((valid) => {
                if (valid) {
                    form.Receivable_Id = id.value;
                    console.log(form);
                    $http.put("http://localhost:5261/api/Receivable_meter/Update", form).then((res) => {
                        if (res) {
                            ElMessage.success("修改成功！");
                            router.push('/Receivable_meter');
                        } else {
                            ElMessage.success("修改失败！");
                        }
                    })
                }else{
                    ElMessage.warning("请填写完整数据!");
                }
            })
        }

        return {
            form,
            Plus,
            tableData,
            id,
            Update,
            rules,
            refform,
            GetOrd_id,
            GetCustomer_id,
            GetSign_id
        }
    }
}
</script>

<style scoped>
.common-layout {
    box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.5);
    background-color: #D3DCE6;
    height: 700px;
    width: 1250px;
    margin: auto;
    padding: auto;
    /* margin: 50px; */
    /* display: flex;
    align-items: center; */
}

.title {
    padding-right: 930px;
    padding-top: 20px;
}

.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
    background-color: aqua;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 100px;
    text-align: center;
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.button {
    padding-right: 37px;
    margin-top: 20px;
    height: 50px;
    position: fixed;
    /* 固定位置 */
    top: auto;
    /* 距离顶部20像素 */
    right: 70px;
    /* 距离右侧20像素 */
    bottom: 20px;
    /* 底部自动 */
    left: auto;
    /* 左侧自动 */
    z-index: 1000;
    /* 确保它在其他内容之上 */

}
</style>